<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body id="hdcms">
    <!---->
    <!-- <h1 id="hd">houdunren.com</h1> -->

    <div id="hd">houdunren.com</div>
    <input type="text" name="title" id="title">

    <!-- 后盾人 -->
    <script>
        /*
         *JS的内容称为DOM节点对象(node),既然是对象就包括操作的NODE属性和方法
         包括12种类型的节点对象
         常用的节点为document,标签元素节点,文本节点,注释节点
         节点均继承自Node类型,所以拥有相同的属性或方法
         document是DOM操作的起点
        
        */
    //    console.log(document.nodeType);//9 文档对象
    //    console.log(document.childNodes.item(0).nodeType)//10 <!DOCTYPE html>
    //    console.log(document.body.nodeType);//1 标签节点
    //    console.log(document.body.attributes[0].nodeType);//2//属性节点
    //    console.log(document.body.childNodes[1].nodeType);//8//注释

    //原型链
    //在浏览器渲染的过程种会将文档内容生成为不同的对象
    //不同的类型节点是由专门的构造函数创建对象
    //使用console.dir 可以打印出DOM节点的对象结构
    //节点也是对象，所以具有JS对象的特征
    
    // function prototype(el){
    //     console.log(el.__proto__);
    //     el.__proto__ ? prototype(el.__proto__) : '';
    // }
    // const node = document.getElementById('hd');
    // prototype(node);
    // console.log(16.5/50);


    // let hd = document.getElementById('hd');
    // // console.log(hd);
    // function prototype(el){
    //     //获取节点对象所属的对象原型
    //     let proto = Object.getPrototypeOf(el);//HTMLDivElement 
    //     console.log(proto);
    //     Object.getPrototypeOf(proto) ? prototype(proto) : '';
    // }
    // prototype(hd);


    // let hd = document.getElementById('hd');
    // hd.id = 'houdunren.com';
    // console.log(hd);

    //title用于显示提示文档也不应该用于其他目的
    // let hd = document.getElementById('hd');
    // hd.title = 'houudnren.com';
    // console.log(hd);

    //下面是为对象合并属性的示例
    // let hd = document.getElementById('hd');
    // Object.assign(hd,{
    //     color : 'red',
    //     change(){
    //         this.innerHTML = '后盾人'
    //         this.style.color = this.color
    //     },
    //     onclick(){
    //         this.change()
    //     }
    // });

    // console.dir(hd)
    

    
    //使用对象特性更改样式属性
    let hd = document.getElementById('hd');
    Object.assign(hd.style,{
        color : 'red',
        backgroundColor:'blue'
    });
    

    </script>
</body>
</html>